<template>
  <div :style="{backgroundColor: bgColor}"
    class="tw-daping-score">
    <div class="tw-daping-score-item" v-for="(item,index) in data" :key="index">
      <div class="xitem">
        <div class="ximage">
          <img :src="require('./assets/s'+index+'.png')" />
        </div>
        <div class="xscore">
          <div class="xlabel">{{item.name}}</div>
          <div class="xvalue">
            <span class="xnumber">{{formatNum(item.value)}}</span>
            <span class="xunit" style="padding-left:5px">{{item.unit}}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="data.length === 0" class="nodatas">暂无数据</div>
  </div>
</template>

<script>
const props = require('./props')

export default {
  name: 'web-imageword-list',

  props,

  data() {
    return {
      listData: []
    }
  },

  computed: {
    style () {
      return {
        scorecolor: this.scorecolor,
        scoreFontSize: this.scoreFontSize,
        unitcolor: this.unitcolor,
        unitFontSize: this.unitFontSize,
        marginTop: this.marginTop,
        marginLeft: this.marginLeft,
        labelcolor: this.labelcolor,
        labelFontSize: this.labelFontSize,
        noDataSize: this.noDataSize,
        noDataColor: this.noDataColor
      }
    }
  },

  methods: {
    setStyle () {
      const style = `
        ::root.tw-daping-score .xunit {
          color:  ${this.unitcolor};
          font-size: ${this.unitFontSize};
        }

        ::root.tw-daping-score .xscore {
          margin-left:  ${this.marginLeft};
        }

        ::root.tw-daping-score .xvalue {
          margin-top: ${this.marginTop};
        }

        ::root.tw-daping-score .xlabel {
          color:  ${this.labelcolor};
          font-size: ${this.labelFontSize};
        }

        ::root.tw-daping-score .xnumber {
          color:  ${this.scorecolor};
          font-size: ${this.scoreFontSize};
        }

        ::root.tw-daping-score .nodatas {
          font-size: ${this.noDataSize};
          color: ${this.noDataColor};
        }
      `

      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    formatNum (strNum) {
      let newStr = ''
      let count = 0
      let str
      // if (typeof (strNum) === 'string') {
      //   return strNum
      // }
      if (strNum === undefined) {
        return ''
      }
      if (strNum === null) {
        return null
      }
      str = strNum + ''
      // 当数字是整数
      if (str.indexOf('.') === -1) {
        for (let i = str.length - 1; i >= 0; i--) {
          if (count % 3 === 0 && count !== 0) {
            newStr = str.charAt(i) + ',' + newStr
          } else {
            newStr = str.charAt(i) + newStr
          }
          count++
        }
        str = newStr
        return str
      } else {
        // 当数字带有小数
        for (let i = str.indexOf('.') - 1; i >= 0; i--) {
          if (count % 3 === 0 && count !== 0) {
            newStr = str.charAt(i) + ',' + newStr
          } else {
            newStr = str.charAt(i) + newStr // 逐个字符相接起来
          }
          count++
        }
        str = newStr + (str + '00').substr((str + '00').indexOf('.'), 3)
        return str
      }
    }
  },

  mounted () {
    this.setStyle()
  },

  beforeDestroy () {
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
